<script setup lang="ts">

import { UrlJob, jobLogType, jobGroupType, PagesWrap } from '@/types/global';
import { TuplifyUnion } from '@/types/utils';
import { HttpTool } from '@/utils/net/http/request';
import { onMounted, reactive, ref, watch } from 'vue';
import MyTable from '@/base-ui/table/index';
import dayjs from 'dayjs';
import SearchForm from '@/components/SearchForm/SearchForm.vue';
import { searchFormConfig } from './config/search.config';

// TODO 操作 —> 执行日志
let MyTableProps = reactive({
    page: { currentPage: 1, pageSize: 10 },
    pageSizeOpt: [1, 10, 20, 50, 100, 500],
})


// 1.双向绑定pageInfo
let pageInfo = ref({ currentPage: 1, pageSize: 10 })
const dataTotal = ref(0)
let searchForm = reactive({
    executorSelect: "all",
    missionSelect: "all",
    stateSelect: "all",
    current: pageInfo.value.currentPage,
    size: pageInfo.value.pageSize,
})


let tableHead = ref([
    {
        colText: "任务 ID",
        key: "jobId",
    }, {
        colText: "执行器组",
        key: "jobGroup",
    }, {
        colText: "调度时间",
        key: "triggerTime",
    }, {
        colText: "调度结果",
        key: "triggerCode",
    },
    // {
    //     colText: "调度详情",
    //     key: "triggerMsg",
    // },
    {
        colText: "执行时间",
        key: "handleTime",
    }, {
        colText: "执行备注",
        key: "handleMsg",
    }])

let tableData = ref<jobLogType[]>([])

const handleSearch = async () => {

    const { records: jobLogList }: { records: jobLogType[] } = await HttpTool.get(UrlJob.log_fetchListByPage)
    // ISO 8601 -> normal time
    jobLogList.forEach(jobLog => {
        jobLog.triggerTime = dayjs(jobLog.triggerTime).format("YYYY-MM-DD HH:mm:ss")
        jobLog.handleTime = dayjs(jobLog.handleTime).format("YYYY-MM-DD HH:mm:ss")
    });
    tableData.value = jobLogList
}



const handleResetSearch = () => {
    searchForm = reactive({
        executorSelect: "all",
        missionSelect: "all",
        stateSelect: "all",
    })
    tableData.value = []
}






watch(() => MyTableProps.page, () => getPageData())
const getPageData = async () => {
    searchForm.current = MyTableProps.page.currentPage
    searchForm.size = MyTableProps.page.pageSize
    let resPageData = await HttpTool.get<PagesWrap<jobLogType[]>>(UrlJob.log_fetchListByPage, searchForm)
    tableData.value = resPageData.records
    dataTotal.value = resPageData.total
}
// 初始化数据
getPageData()






</script>


<template>
    <div style="border-color: pink;
    border-style: solid;">
        <search-form :search-form-config="searchFormConfig"></search-form>
        <el-row>
            <MyTable
                v-model:page="MyTableProps.page"
                :pageSizeOpt="MyTableProps.pageSizeOpt"
                :dataTotal="dataTotal"
                :tableHead="tableHead"
                :tableData="tableData"
            ></MyTable>
        </el-row>
    </div>
</template>


<style>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
}
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
}
</style>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}
.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>